<template>
  <div class="group-component" v-if="groupList.length !== 0">
    <el-card v-for="ot in groupList" class="mb10" shadow="never">
      <template #header>
        <div class="card-flex">
          <span>{{ ot.groupName }}</span>
          <div class="card-flex card-num">
            {{ form.teamCount }}支球队
            <p class="card-dec">
              ({{ RaceStageGroupTypeText[form.groupStageType] }}、晋级{{
                form.advanceCount
              }}支球队)
            </p>
          </div>
        </div>
      </template>
      <template #default>
        <el-select
          v-for="o in ot.teamInfoList"
          :key="o.teamId"
          v-model="o.teamId"
          class="mb10 mr10"
          placeholder="请选择球队"
        >
          <el-option
            v-for="item in optionList"
            :label="item.teamName"
            :value="item.teamId"
          />
        </el-select>
        <div>
          <el-button type="primary" @click="handleSubmit(ot)">提交</el-button>
        </div>
      </template>
    </el-card>
  </div>
  <el-empty v-else description="暂无数据" />
</template>

<script lang="ts" setup>
import { onMounted, onUpdated, ref } from "vue";
import { RaceStageGroupTypeText } from "../../../config/index";
import { useRoute } from "vue-router";
import { updateRaceGroup } from "@/api/match";
import { ElMessage } from "element-plus";

const props = defineProps(["form", "raceGroupList", "raceTeamList"]);
const route = useRoute();
const optionList = ref([]);
const groupList = ref([]);

// 提交数据
const handleSubmit = async (item: any) => {
  const res = await updateRaceGroup(item);
  if (res.code === 200) {
    ElMessage.success(res.msg);
  } else {
    ElMessage.warning(res.msg);
  }
};
// 数据初始
onUpdated(() => {
  if (props.form?.groupCount) {
    groupList.value = props.raceGroupList;
    optionList.value = props.raceTeamList;
  }
});
</script>

<style  lang="scss" scoped>
.group-component {
  .card-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-num {
    font-size: 12px;
    color: var(--color-primary);
  }

  .card-dec {
    color: #999;
  }
}
</style>
